<template>
	<view class="kaoshi-bg" style="background-image: url('/static/img/exam.png');ba">
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- <view class="kaoshi-head">
      <view class="kaoshi-head-top">
        <view class="kaoshi-head-left">
          <view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
        </view>
        <view class="kaoshi-head-m">考试报告</view>
      </view>
    </view> -->
		<view>
			<view class="kaoshi-question-over">
				<view class="endtime">交卷时间：{{ up_time }}</view>
				<view class="kaoshi-baogao">
					<circle-progress-bar :animate="false" :border_width="5" border_color="#3c7bfc" :size="125"
						border_back_color="#f3f3f3" :pro="pages_params.dadui_num / pages_params.total_num">
						<!-- content -->
						<view class="kaoshi-baogao-title">
							<view class="kaoshi-baogao-title-l">{{ pages_params.score }}</view>分
						</view>
					</circle-progress-bar>
				</view>
				<view class="kaoshi-question-over-content">
					<view class="kaoshi-question-over-content-flex">
						<view>考试时间</view>
						<view class="kaoshi-question-over-content-text">{{
              use_time
            }}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>答对题数</view>
						<view class="kaoshi-question-over-content-text">{{
              pages_params.dadui_num
            }}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>总分数</view>
						<view class="kaoshi-question-over-content-text">{{
              pages_params.total_num
            }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 答题卡详情 -->
		<question-answer-view :timu_order="timu_order" :timu_list="timu_list" :my_res="my_res" :total_num="total_num">
		</question-answer-view>
		<view class="order-pay">
			<view class="questionBankAnswer-bottom-flex" @tap="tap_handler('all')">
				<view class="iconfont icon-bianjisekuai"></view>
				<view>全部解析</view>
			</view>
			<!-- 	<view class="questionBankAnswer-bottom-flex" @tap="tap_handler('again')">
				<view class="iconfont icon-shezhi"></view>
				<view>重新练习</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';
	export default {
		data() {
			return {
				timu_order: -1,
				pages_params: {},
				jiaojuaninfo: {},
				total_num: 0, //全部题目数
				// 答题卡
				timu_list: [],
				my_res: {
					right_num: 0,
					error_num: 0
				}
			};
		},
		computed: {
			up_time() {
				let start = this.pages_params.up_time || 0;
				let sec = start;
				let date = new Date(start * 1000);
				let yy = date.getFullYear();
				let mm = date.getMonth() + 1;
				let dd = date.getDate();
				let hour = date.getHours();
				let miu = date.getMinutes();
				let s = date.getSeconds();
				// formatDigit
				mm = this.$myUtils.$common.formatDigit(mm);
				dd = this.$myUtils.$common.formatDigit(dd);
				hour = this.$myUtils.$common.formatDigit(hour);
				miu = this.$myUtils.$common.formatDigit(miu);
				s = this.$myUtils.$common.formatDigit(s);
				return `${yy}-${mm}-${dd} ${hour}:${miu}:${s}`;
			},
			use_time() {
				//usetime
				let start = this.pages_params.usetime || 0;
				let hour = parseInt(start / 3600);
				let miu = parseInt((start - hour * 3600) / 60);
				let s = start - hour * 3600 - miu * 60;
				// formatDigit
				hour = this.$myUtils.$common.formatDigit(hour);
				miu = this.$myUtils.$common.formatDigit(miu);
				s = this.$myUtils.$common.formatDigit(s);
				return `${hour}:${miu}:${s}`;
			},
		},
		components: {},
		onLoad(opts) {
			this.exam_id = opts.id || 2
			this.pages_params = this.$myCatch.getItem("jiaojuan_info");
			this.get_timu_list()
		},
		methods: {
			tap_handler(type) {
				if (type == "again") {
					uni.navigateBack({
						delta: 1,
					});
					return
				}
				if (this.$myUserLogin.getToken()) {
					this.$openrul('/pages/questionBank/questionBankView/index?id=' + this.exam_id + '&from_type=1')
				} else {
					Error.errorNotLoggedIn();
				}
			},
			// 获取答题卡
			async get_timu_list() {
				let res = await this.$myHttp.post({
					//mytodo
					url: this.$myHttp.urlMap.examCard2,
					data: {
						analysis: 1, //是否获取考试解析
						exam_id: this.exam_id // 考试id
					},
					needLogin: true
				});

				console.log(res, "res");
				if (res.code == 1) {
					this.timu_list = res.data.card;
					console.log(this.timu_list, "this.timu_list");
					this.total_num = this.timu_list.length;
					this.timu_order = res.data.position
					this.get_my_res();
				}
			},
			get_my_res() {
				let error_num = 0,
					right_num = 0;
				for (let i = 0, leng = this.timu_list.length; i < leng; i++) {
					//if_que 答题状态：1是错2是对3是未答过此题
					if (!this.timu_list[i].state) {
						error_num++
					} else if (this.timu_list[i].state == 1) {
						right_num++
					}
				}
				this.$set(this.my_res, 'right_num', right_num)
				this.$set(this.my_res, 'error_num', error_num)
			},
		},
	};
</script>

<style>
	page {
		background: #f6f6f6;
	}

	.kaoshi-bg {
		min-height: 100vh;
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 20px 15px 110rpx;
	}

	.endtime {
		font-size: 14px;
		color: #aaa;
	}

	/*练习报告*/
	.kaoshi-question-over {
		background-color: #fff;
		padding: 15px 20px 25px;
		border-radius: 8px;
	}

	.kaoshi-question-over-content {
		display: flex;
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #9a9a9a;
	}

	.kaoshi-question-over-content-flex {
		flex: 1;
		text-align: center;
	}

	.kaoshi-question-over-content-text {
		color: #000;
		font-size: 20px;
		padding-top: 4px;
	}

	.kaoshi-baogao {
		margin: 25px auto 30px;
		text-align: center;
		color: #000;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.kaoshi-baogao-title {
		display: flex;
		justify-content: center;
		align-items: baseline;
		font-size: 14px;
	}

	.kaoshi-baogao-title-l {
		font-size: 28px;
		margin-right: 1px;
	}

	.kaoshi-baogao-text {
		margin-top: 5px;
		font-size: 12px;
		color: #aaa;
		letter-spacing: 0.5px;
	}

	.flexline {
		height: 25px;
		border-right: 1px solid #f3f3f3;
	}
</style>